import 'package:flutter/material.dart';
import '../constants.dart' show AppColors, AppStyle, Constants;
import '../model/conversation.dart' show Conversation, ConversationPageData, Device;


class _ConversationItem extends StatelessWidget {

  const _ConversationItem({Key key, this.conversation})
    : assert(conversation != null),
    super(key: key);

  final Conversation conversation;


  @override
  Widget build(BuildContext context) {

    // 根据图片的获取方式初始化头像组件
    Widget avatar;
    if (conversation.isAvatarFromNet()){
      avatar = Image.network(
        conversation.avatar,
        width: Constants.CoversationAvatarSize,
        height: Constants.CoversationAvatarSize,
      );
    }else {
      avatar = Image.asset(
        conversation.avatar,
        width: Constants.CoversationAvatarSize,
        height: Constants.CoversationAvatarSize,
      );
    }

    // 未读消息角标
    Widget avatarContainer;
    if (conversation.unreadMsgCount > 0){
      Widget unreadMsgCountText = Container(
        width: Constants.UnReadMsgNotifyDotSize,
        height: Constants.UnReadMsgNotifyDotSize,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(Constants.UnReadMsgNotifyDotSize / 2.0),
          color: Color(AppColors.NotifyDotBg)
        ),
        child: Text(
          conversation.unreadMsgCount.toString(),
          style: AppStyle.UnReadMsgCountDotStyle,
        ),
      );

      avatarContainer = Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          avatar,
          // 角标偏移
          Positioned(
            right: -6.0,
            top: -6.0,
            child: unreadMsgCountText,
          )
        ],
      );
    }else {
      avatarContainer = avatar;
    }

    // 勿扰模式图标
    Widget muteIcon = Icon(
        IconData(
          0xe74c,
          fontFamily: Constants.IconFontFamily
        ),
        color: Color(AppColors.ConversationMuteIcon),
        size: Constants.CoversationMuteIconSize,
    );

    // Widget muteIcon2 = Icon(
    //     IconData(
    //       0xe74c,
    //       fontFamily: Constants.IconFontFamily
    //     ),
    //     color: Colors.transparent, // 透明颜色
    //     size: Constants.CoversationMuteIconSize,
    // );

    List<Widget> _rightArea = [
      Text(conversation.updateAt, style: AppStyle.DesStyle),
      SizedBox(height: 10.0),
    ];

    if (conversation.isMute){
      _rightArea.add(muteIcon);
    }

    return Container(
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        color: Color(AppColors.ConversationItembg),
        border: Border(
          bottom: BorderSide(
            color: Color(AppColors.DividerColor),
            width: Constants.DividerWith,
          ),
        ),
      ),
      // color: Color(AppColors.ConversationItembg),
      child: Row(
        // mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          avatarContainer,
          Container(width: 10.0),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(conversation.title, style: AppStyle.TitleStyle,),
                Text(conversation.des, style: AppStyle.DesStyle,),
              ],
            ),
          ),
          Container(width: 10.0),
          Column(
            children: _rightArea,
          ),
        ],
      ),
    );
  }
}

class _DeviceInfoItem extends StatelessWidget {

  const _DeviceInfoItem({this.device : Device.WIN}) : 
    assert(device != null);

  final Device device;

  int get iconName {
    return device == Device.WIN ? 0xe7da : 0xe640;
  }

  String get deviceName {
    return device == Device.WIN? 'Windows' : 'Mac';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 24.0, top: 10.0, right: 24.0, bottom: 10.0),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: Constants.DividerWith,
            color: Color(AppColors.DividerColor)
          ),
        ),
        color: Color(AppColors.DeviceInfoItemBg)
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(
            IconData(
              this.iconName,
              fontFamily: Constants.IconFontFamily
            ),
            size: 24.0,
            color: Color(AppColors.DeviceInfoItemIcon),
          ),
          SizedBox(width: 16.0,),
          Text('$deviceName 微信已登录，手机通知已关闭。', style: AppStyle.DeviceInfoItemTextStyle,)
        ],
      ),
    );
  }
}

class ConversationPage extends StatefulWidget {

  @override
  _ConversationPageState createState() => _ConversationPageState();
}

class _ConversationPageState extends State<ConversationPage> {

  final ConversationPageData data = ConversationPageData.mock();

  @override
  Widget build(BuildContext context) {
    
    final mockCoversations = data.conversations;
    
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (data.device != null) {
          if (index == 0) {
            return _DeviceInfoItem(device: data.device,);
          }
          return _ConversationItem(conversation : mockCoversations[index - 1]);
        }else {
          return _ConversationItem(conversation : mockCoversations[index]);
        }
      },
      itemCount: data.device == null? mockCoversations.length : mockCoversations.length + 1,
    );
  }
}